<template>
  <div class="refresh-model-page">
    <h2>刷新推荐模型</h2>
    <el-button type="primary" @click="refreshModel">立即刷新</el-button>
    <div v-if="loading" class="loading">刷新中，请稍候...</div>
    <div v-if="message" :class="['message', success ? 'success' : 'error']">{{ message }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import {ElMessage} from 'element-plus';

const loading = ref(false);
const message = ref('');
const success = ref(false);

const refreshModel = async () => {
  loading.value = true;
  message.value = '';
  success.value = false;

  try {
    const response = await fetch('http://localhost:5000/refresh',{method: 'POST'});
    const data = await response.json();
    if (data.status === 'success') {
      success.value = true;
      message.value = '推荐模型刷新成功';
      ElMessage.success(data.message);
    }
  } catch (error) {
    success.value = false;
    message.value = '推荐模型刷新失败: ' + error;
    ElMessage.error('推荐模型刷新失败');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.refresh-model-page {
  padding: 20px;
}

.loading {
  margin-top: 10px;
  color: #666;
}

.message {
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
}

.success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.error {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>
